<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>
</head>
<body>
    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
    <input type="text" id="input1" value="66666" style="ime-mode:disabled" maxlength="8" size="4" onpaste="return false" onkeypress="keyPress()">&nbsp;,&nbsp;
    <input type="text" id="input2" value="999" style="ime-mode:disabled" maxlength="8" size="4" onpaste="return false" onkeypress="keyPress()">&nbsp;,&nbsp;
    <input type="text" id="input3" value="888888" style="ime-mode:disabled" maxlength="8" size="4" onpaste="return false" onkeypress="keyPress()">&nbsp;,&nbsp;
    <input type="text" id="input4" value="2333333" style="ime-mode:disabled" maxlength="8" size="4" onpaste="return false" onkeypress="keyPress()">
    <input type="button" onclick="zuida()" value="最大值">
    <br>
    <span id="zuida">数组中的最大值:</span>
    <br>
    <hr style="height:1px;border:none;border-top:1px solid #555555;" />
    <br>
    看书：
    <input type="checkbox" name="checkbox" value=1>
    <br>
    写字：
    <input type="checkbox" name="checkbox" value=2>
    <br>
    打飞机：
    <input type="checkbox" name="checkbox" value=3>
    <br>
    玩游戏：
    <input type="checkbox" name="checkbox" value=4>
    <br>
    <button onclick="checkAll()">
        全选/取消
    </button>
    <hr style="height:1px;border:none;border-top:1px solid #555555;" />
    <p>局部变量计数。</p>
    <button type="button" onclick="myFunction()">计数!</button>
    <p id="demo">0</p>
    <hr style="height:1px;border:none;border-top:1px solid #555555;" />
    <p id="content"> 请等三秒钟!</p>
    <hr style="height:1px;border:none;border-top:1px solid #555555;" />
    <input type="radio" name="radio" value="1" onclick="radio()" /><label>a</label>

    <input type="radio" name="radio" value="2" onclick="radio()" /><label>b</label>

    <input type="radio" name="radio" value="3" onclick="radio()" /><label>c</label>

    <input type="radio" name="radio" value="4" onclick="radio()" /><label>d</label>
    <hr style="height:1px;border:none;border-top:1px solid #555555;" />
    <div>
        <ul class="uls">
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
        </ul>
    </div>
    <hr style="height:1px;border:none;border-top:1px solid #555555;" />
    <button onclick="myFunction1()">点我</button>

    <div id="myDIV">
        这是 DIV 元素。
    </div>
</body>
<script>
    function keyPress() {
        let keyCode = event.keyCode;
        if (keyCode >= 48 && keyCode <= 57) {
            event.returnValue = true;
        }else {
            event.returnValue = false;
        }
    }
    function zuida() {
        let zuida = []
        let num1 =$("#input1").val();
        let num2 =$("#input2").val();
        let num3 =$("#input3").val();
        let num4 =$("#input4").val();
        zuida.push(num1);
        zuida.push(num2);
        zuida.push(num3);
        zuida.push(num4);
        console.log(zuida)
        let maxN = Math.max.apply(null,zuida);
        $("#zuida").html("数组中的最大值:"+maxN);
    }

    function checkAll(){
        let flag=true;
        $("input[name='checkbox']").each(function(i,o){
            if(!$(o).prop("checked")){
                flag=false;
            }
        });
        $("input[name='checkbox']").each(function(i,o){
            if(!flag){
                $(o).prop("checked",true);
            }else{
                $(o).prop("checked",false);
            }
        });
    };

    function myFunction(){
        let num = $("#demo").html();
        $("#demo").html(++num)
    }

    $(function(){
        setInterval(function (){
            if ($("#content").css("visibility")=="hidden"){
                $("#content").css('visibility', 'visible')
            }else{
                $("#content").css('visibility', 'hidden')
            }
        },3000)
    })

    function radio(){
        window.confirm("当前选中值："+$("[name='radio']:checked").val())
    }

    function myFunction1(){
        $("#myDIV").toggle();
    }
    $("ul").on("click","li",function(){
        $(this).css({"background":"red"})
        $(this).siblings().css({"background":"white"})
    })


</script>
<style>
    li {
        border: 1px solid black;
        width: 20%;
        text-align: center;
        line-height: 40px;
    }
</style>
</html>